<template>
  <!-- 车品管理 - 列表 -->
  <view class="car-goods-manage-container flex flex-dir-c">
    <view class="header flex flex-ai-c flex-jc-sb">
      <u-tabs-swiper
        height="90"
        bar-width="78"
        inactive-color="#666666"
        bar-height="6"
        active-color="#FBB000"
        ref="uTabs"
        :list="titleList"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
      ></u-tabs-swiper>
      <view
        class="category-title"
        :class="downStatus ? 'down-open' : 'down-close'"
      >
        <u-dropdown
          active-color="#FBB000"
          @open="downStatus = true"
          @close="downStatus = false"
        >
          <u-dropdown-item
            v-model="categoryValue"
            :title="categoryTitle"
            :options="categoryList"
            height="800rpx"
            @change="categoryChange"
          ></u-dropdown-item>
        </u-dropdown>
      </view>
    </view>

    <!-- 列表内容 -->
    <view class="list-container">
      <swiper
        :current="swiperCurrent"
        :duration="200"
        @transition="transition"
        @animationfinish="animationfinish"
        @change="swiperChange"
        class="swiper-container"
      >
        <swiper-item>
          <scroll-view
            scroll-y
            @scrolltolower="onreachBottom"
            class="swiper-item"
          >
            <!-- 空数据时显示的图 -->
            <default-img
              :show="list[0].length === 0"
              msg="暂无相关商品"
            ></default-img>

            <!-- 列表内容 -->
            <view v-for="(item, i) in list[0]" :key="item.id" class="list">
              <card-item :item="item" @onShareClick="openSharePopup"></card-item>
            </view>

            <!-- 加载更多状态 -->
            <view class="mt-20">
              <u-loadmore
                v-if="list[0].length !== 0"
                :status="loadMoreStatus[0]"
                @loadmore="getGoodsList()"
              />
            </view>
          </scroll-view>
        </swiper-item>

        <swiper-item>
          <scroll-view
            scroll-y
            @scrolltolower="onreachBottom"
            class="swiper-item"
          >
            <!-- 空数据时显示的图 -->
            <default-img
              :show="list[1].length === 0"
              msg="暂无相关商品"
            ></default-img>

            <!-- 列表内容 -->
            <view v-for="(item, i) in list[1]" :key="item.id" class="list">
              <card-item :item="item" @onShareClick="openSharePopup"></card-item>
            </view>

            <!-- 加载更多状态 -->
            <view class="mt-20">
              <u-loadmore
                v-if="list[1].length !== 0"
                :status="loadMoreStatus[1]"
                @loadmore="getGoodsList()"
              />
            </view>
          </scroll-view>
        </swiper-item>

        <swiper-item>
          <scroll-view
            scroll-y
            @scrolltolower="onreachBottom"
            class="swiper-item"
          >
            <!-- 空数据时显示的图 -->
            <default-img
              :show="list[2].length === 0"
              msg="暂无相关商品"
            ></default-img>

            <!-- 列表内容 -->
            <view v-for="(item, i) in list[2]" :key="item.id" class="list">
              <card-item :item="item" @onShareClick="openSharePopup"></card-item>
            </view>

            <!-- 加载更多状态 -->
            <view class="mt-20">
              <u-loadmore
                v-if="list[2].length !== 0"
                :status="loadMoreStatus[2]"
                @loadmore="getGoodsList()"
              />
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>

      <!-- 底部固定按钮 -->
      <view class="footer flex flex-ai-c">
        <i-button
          text="批量管理"
          color="#FFE23E"
          bg-color="#333"
          shape="circleLeft"
          class="btn"
          @click.native="goPages('batchManage')"
        ></i-button>
        <i-button
          text="添加商品"
          color="#333"
          shape="circleRight"
          class="btn"
          @click.native="goPages('selectTheCategory')"
        ></i-button>
      </view>
    </view>
    
    <!-- 分享弹窗选项 -->
    <i-share-popup v-model="sharePopupShow" @change="handleShare"></i-share-popup>
  </view>
</template>

<script src="./carGoodsManage.js"></script>

<style lang="scss" scoped>
@import './carGoodsManage.scss';
</style>
